<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login{
            width: 600px;
            height: 400px;
            margin: auto;
        }
        input{
            width: 60%;
            height: 40px;
            text-indent: 1em;
        }
        button{
            width: 40%;
            height: 40px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="login">
        <div>
            用户名：<input class="ipt1" placeholder="请输入用户名"/>
            <p class="p1"></p>
        </div>
        <div>
            密码：<input class="ipt2"  placeholder="请输入密码"/>
            <p class="p2"></p>
        </div>
        <button disabled>登录</button>
    </div>
    <script>
        let ipt1 = document.querySelector('.ipt1');
        let ipt2 = document.querySelector('.ipt2');
        let p1 = document.querySelector('.p1');
        let p2 = document.querySelector('.p2');
        let btn = document.querySelector('button');
        let flag1 = false;
        let flag2 = false;
        ipt1.onblur = function(){
            re=/^[\w_-]{4,15}$/
            if(!re.test(ipt1.value)){
                p1.innerHTML='请输入正确的用户名，4-请输入正确的用户名，4-16位，下划线，减号';
                flag1 = false
            }else{
                p1.innerHTML=''
                flag1 = true
            }
            checkBtn()
        }
        ipt2.onblur = function(){
            re=/^[\w_-]{8,15}$/
            if(!re.test(ipt2.value)){
                p2.innerHTML='请输入正确的用户名，4-请输入正确的用户名，4-16位，下划线，减号';
                flag2 = false
            }else{
                p2.innerHTML=''
                flag2 = true
            }
            checkBtn()
        }
        function checkBtn(){
            if(flag1 === true && flag2 === true){
                btn.disabled = false
            }else{
                btn.disabled = true
            }
        }

    </script>
</body>
</html>